<!-- 文章详情模块 -->
<template>
  <div class="detailBox tcommonBox" >
            <span class="s-round-date">
                <span class="month" v-html="showInitDate(article.createTime,'month')+'月'"></span>
                <span class="day" v-html="showInitDate(article.createTime,'date')"></span>
            </span>
    <header>
      <h1>
        <a :href="'#/DetailShare'" >
          {{article.title}}
        </a>
      </h1>
      <h2>
        <i class="fa fa-fw fa-user"></i>发表于 <span >{{article.createTime}}</span> •
        <i class="fa fa-fw fa-eye"></i>{{article.browseCount}} 次围观 •
        <i class="fa fa-fw fa-comments"></i>活捉 {{article.commentCount}} 条 •
        <span class="rateBox">
                        <i class="fa fa-fw fa-heart"></i>{{article.likeCount}}点赞
                        <i class="fa fa-fw fa-star"></i>{{article.collectCount}}收藏
                    </span>
      </h2>
      <div class="ui label">
        <a :href="'#/Home?categoryId='+article.classId">{{article.categoryName}}</a>
      </div>
    </header>
    <div class="article-content" v-html="article.content"></div>
    <div class="dshareBox bdsharebuttonbox"  data-tag="share_1">
      分享到:
      <a href="javascript:void(0);" class="ds-weibo fa fa-fw fa-weibo" data-cmd="tsina" ></a>
      <a href="javascript:void(0);" class="ds-qq fa fa-fw fa-qq" data-cmd="tqq"></a>
      <a href="javascript:void(0);" class="ds-wechat fa fa-fw fa-wechat" data-cmd="weixin"></a>
      <div class="dlikeColBox">
        <div class="dlikeBox" @click="likecollectHandle(1)" >
          <i :class="favourite.likeArt?'fa fa-fw fa-heart':'fa fa-fw fa-heart-o'" ></i>喜欢 | {{article.likeCount}}
        </div>
        <div class="dcollectBox" @click="likecollectHandle(2)" >
          <i :class="favourite.collectArt?'fa fa-fw fa-star':'fa fa-fw fa-star-o'" ></i>收藏 | {{article.collectCount}}
        </div>
      </div>
    </div>
    <div class="donate">
      <div class="donate-word">
        <span @click="pdonate=!pdonate">赞赏</span>
      </div>
      <el-row :class="pdonate?'donate-body':'donate-body donate-body-show'" :gutter="30">
        <el-col  :span="12"   class="donate-item">
          <div class="donate-tip">
            <img :src="rewardData.wechatImage" />
            <span>微信扫一扫，向我赞赏</span>
          </div>
        </el-col>
        <el-col :span="12"  class="donate-item">
          <div class="donate-tip">
            <img :src="rewardData.alipayImage" />
            <span>支付宝扫一扫，向我赞赏</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {initDate} from '../utils/server.js'
  import {getArticleInfo} from '../api/article'
  import {addFavourite,getByArticleIdAndUserId,removeFavourite} from '../api/favourite'
  export default {
    data() { //选项 / 数据
      return {
        rewardData:{
          wechatImage:'../../static/img/wechat.png',
          alipayImage:'../../static/img/alipay.png'
        },//赞赏二维码

        article:{
          id:-1,
          classId:-1,
          title:'',
          description:'',
          image:'',
          browseCount:0,
          likeCount:0,
          commentCount:0,
          collectCount:0,
          createTime:'',
          categoryName:'',
          userId:-1,
          content:''
        },//有关文章的属性
        favourite:{
          likeArt:false,
          collectArt:false
        },//有关点赞的数据

        pdonate:true,//打开赞赏控制,
      }
    },
    methods: { //事件处理器
      showInitDate:function(date,full){//年月日的编辑
        return initDate(date,full);
      },
      likecollectHandle: function(actionType){//用户点击喜欢1,用户点击收藏0
        let that = this
        if(this.$store.state.userId === -1){
          this.$message.info("登录后即可点赞评论！")
        }else{

          if((this.favourite.likeArt && actionType === 1) || (this.favourite.collectArt && actionType ===2)){
            removeFavourite(this.$store.state.username,this.$store.state.articleId,actionType).then(response =>{
              if(actionType ===1){
                that.favourite.likeArt = false
                that.article.likeCount -= 1
              }else {
                that.favourite.collectArt = false
                that.article.collectCount -= 1
              }
            }) //移除点赞或者收藏
          }else {
            addFavourite(this.$store.state.userId,this.$store.state.username,this.$store.state.articleId,1,actionType).then(response =>{
              if(actionType === 1){
                that.favourite.likeArt = true
                that.article.likeCount += 1
              }else{
                that.favourite.collectArt = true
                that.article.collectCount += 1
              }
            })
          }

        }
      },
      init:function(){
        let that = this
        //获取详情接口
        getArticleInfo(this.$store.getters.articleId).then(response =>{
          that.article = response.data
        })
        //初始化点赞和收藏状态
        getByArticleIdAndUserId(this.$store.state.articleId,this.$store.state.userId).then(response =>{
            response.data.forEach((favourite) =>{
                if(favourite.actionType === 1 && favourite.resourceType ==1){
                    that.favourite.likeArt = true
                }
                if(favourite.actionType === 2 && favourite.resourceType ==1){
                    that.favourite.collectArt = true
                }
            })
        })
      }
    },
    created() { //生命周期函数
      this.init();
    },

  }
</script>

<style lang="less">

  .detailBox .article-content{
    font-size: 15px;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    overflow-x: hidden;
  }
  .detailBox .article-content p{
    margin:10px 0;
    line-height:24px;
    word-wrap: break-word;
    word-break: break-all;
    overflow-x: hidden;
  }
  .detailBox .article-content pre{
    word-wrap: break-word;
    word-break: break-all;
    overflow-x: hidden;
  }
  .detailBox .article-content img{
    max-width: 100%!important;
    height: auto!important;
    overflow-x: hidden;
  }
  .detailBox .article-content a{
    color:#df2050!important;
  }
  .detailBox .article-content a:hover{
    text-decoration: underline;
    color: #f00!important;
  }
  .detailBox .article-content i{
    font-style: italic;
  }
  .detailBox .article-content strong{
    font-weight: bold;
  }
  .detailBox .article-content ul{
    list-style-type: disc!important;
    list-style: disc!important;
    padding-left: 40px!important;
    li{
      list-style-type: disc!important;
      list-style: disc!important;
    }
  }
  .detailBox .article-content h1, .detailBox .article-content h2, .detailBox .article-content h3{
    font-size: 200%;
    font-weight: bold;
  }
  .detailBox .article-content h4, .detailBox .article-content h5, .detailBox .article-content h6{
    font-size: 150%;
    font-weight: bold;
  }
  .detailBox .viewdetail{
    margin:10px 0 ;
    line-height: 24px;
    text-align: center;
  }
  /*分享图标*/
  .dshareBox {
    margin-top:40px;
    position: relative;
  }
  .dshareBox a{
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    font-size: 18px;
    border-radius: 50%;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
    margin: 4px;
    background: #fff;
    transition: background 0.6s ease-out;
  }
  .dshareBox .ds-weibo{
    border: 1px solid #ff763b;
    color: #ff763b;
  }
  .dshareBox .ds-weibo:hover{
    color: #fff;
    background: #ff763b;
  }
  .dshareBox .ds-qq{
    color: #56b6e7;
    border: 1px solid #56b6e7;
  }
  .dshareBox .ds-qq:hover{
    color: #fff;
    background: #56b6e7;
  }
  .dshareBox .ds-wechat{
    color: #7bc549;
    border: 1px solid #7bc549;
  }
  .dshareBox .ds-wechat:hover{
    color: #fff;
    background: #7bc549;
  }
  .dshareBox .ds-wechat:hover .wechatShare{
    opacity: 1;
    visibility: visible;
  }
  .detailBox .bdshare-button-style0-32 a{
    float:none;
    background-image: none;
    text-indent: inherit;
  }
  /*点赞 收藏*/
  .dlikeColBox{
    display: inline-block;
    float:right;
  }
  .dlikeBox,.dcollectBox{
    display: inline-block;
    padding:0 10px;
    height:35px;
    color: #e26d6d;
    line-height: 35px;
    border-radius: 35px;
    border: 1px solid #e26d6d;
    cursor: pointer;
  }

  /*赞赏*/
  .donate-word{
    margin:40px 0;
    text-align: center;
  }
  .donate-word span{
    display: inline-block;
    width:80px;
    height:34px;
    line-height: 34px;
    color:#fff;
    background: #e26d6d;
    margin:0 auto;
    border-radius: 4px;
    cursor: pointer;
  }
  .donate-body{
    display: none;
  }
  .donate-body-show{
    display: block;
  }
  .donate-item{
    text-align: right;
  }
  .donate-item:last-child{
    text-align: left;
  }
  .donate-item img{
    width:100%;
    display: block;
    height:auto;
  }
  .donate-item div{
    display: inline-block;
    width: 150px;
    padding: 0 6px;
    box-sizing: border-box;
    text-align: center;
  }
  .donate-item div span{
    display: inline-block;
    width:100%;
    margin: 10px 0;
    text-align: center;
  }
  .donate-body .donate-item:first-of-type div{
    color:#44b549;
  }
  .donate-body .donate-item:nth-of-type(2) div{
    color:#00a0e9;
  }

  .bd_weixin_popup{
    position: fixed!important;
  }
</style>
